<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>

	<body>

		<div id="app">

			<template>
				<el-container style=" border: 1px solid #eee;">
					<el-aside width="350px" style="background-color: rgb(238, 241, 246);border: 1px solid #eee">
						<el-table :data="tableData">
							<el-table-column prop="name" label="姓名">
							</el-table-column>

						</el-table>
					</el-aside>

					<el-container>
						<el-header style="text-align: right; font-size: 12px">
							<el-dropdown>
								<i class="el-icon-setting" style="margin-right: 15px"></i>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>查看</el-dropdown-item>
									<el-dropdown-item>新增</el-dropdown-item>
									<el-dropdown-item>删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<span>王小虎</span>
						</el-header>

						<el-main>
							<el-table :data="tableData">
								<el-table-column prop="date" label="日期" width="140">
								</el-table-column>
								<el-table-column prop="name" label="姓名" width="120">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
							</el-table>
						</el-main>
					</el-container>
				</el-container>
			</template>
		</div>
	</body>
	<!-- 先引入 Vue -->
	<script src="../js/vue.js"></script>

	<script src="../js/element.ui.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				screenHeight: document.documentElement.clientHeight, // 屏幕高度
				item = {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				};
				return {
					tableData: Array(20).fill(item)
				}
			},
			created: function() {
				setHeight()
			},
		
			mounted: function() {
				var _this = this
				window.onresize = function() { // 定义窗口大小变更通知事件
					setHeight()
				}
			}
		});
        function setHeight(){
			screenHeight = document.documentElement.clientHeight-30 // 窗口高度
			JsWithVue(function() {
				$('.el-container').css({
					height: screenHeight + 'px',
				});
			})
		}
		function JsWithVue(fun) {
			setTimeout(fun, "10");
		}
	</script>
	<style>
		.el-header {
			background-color: #B3C0D1;
			color: #333;
			line-height: 60px;
		}

		.el-aside {
			color: #333;
		}
	</style>

</html>
